<!-- 采集素材 -->
<template>
	<view class="material-center-page">
		<view class="directory-cls">
			<view>默认文件夹 ></view>
			<view class="color_999999 font-size_24rpx">共15个文件</view>
		</view>
		<view class="height130"></view>
		<!-- 文件data -->
		<block v-for="(i, j) in 7" :key="j">
			<view class="display-a file-cls" @click="lookVideo">
				<image src="/static/cloud/file.png"></image>
				<view class="sunui-flex-column">
					<view class="sunui-flex-align-center file-name-cls">
						<text>通用图片素材</text>
						<view class="display-a-jc">公用</view>
					</view>
					<view class="color_999999 font-size_24rpx">3个 | 2023/10/31 16:00</view>
					</view>
		</view>
		</block>
		<view class="height130"></view>
		<view class="fixed-bottom-btn">
			<block v-for="(i, j) in btnList" :key="j">
				<view class="flex-column btn-cls" v-if="i.isShow" @click="goTo(i.type)">
					<image :src="i.img"></image>
					<view>{{ i.name }}</view>
				</view>
			</block>
		</view>
		<sunui-popup ref="pop">
			<template v-slot:content>
				<view class="v-pop-cls">
					<view class="margin-bottom_50rpx font-size_36rpx display-a-jc">新建文件夹</view>
					<view class="display-a-js">
						<view>
							文件夹名称
							<span class="must">*</span>
						</view>
						<input type="text" v-model="form.displayName" class="input-frame" placeholder="请输入文件夹名称" placeholder-class="placeholder" />
					</view>
					<view class="display-a-js margin-top_40rpx margin-bottom_30rpx">
						<view>
							文件夹类型
							<span class="must">*</span>
						</view>
						<input type="text" v-model="form.displayName" class="input-frame" placeholder="文件夹" placeholder-class="placeholder" />
					</view>
					<view class="display-a-js margin-top_40rpx margin-bottom_30rpx">
						<view>
							共同文件夹
							<span class="must">*</span>
						</view>
						<input type="text" v-model="form.displayName" class="input-frame" placeholder="文件夹" placeholder-class="placeholder" />
					</view>
					<view class="sunui-flex-space-around margin-top_60rpx">
						<view class="confirm-btn">确认</view>
						<view class="cancel-btn">取消</view>
					</view>
				</view>
			</template>
		</sunui-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form:{},
			btnList: [
				{
					img: '/static/cloud/addFile.png',
					name: '新建文件夹',
					type: 1,
					isShow: true
				},
				{ type: 2, img: '/static/cloud/delFile.png', 
				name: '删除文件夹', isShow: true },
				{ type: 3, img: '/static/cloud/uploadFile.png',
				 name: '上传素材', isShow: false },
				{ type: 4, img: '/static/cloud/moveFile.png',
				 name: '素材搬家', isShow: false }
			]
		};
	},
	methods: {
		// 查看视频
		lookVideo(){
			this.$sun.navGo('/pages/cloudFlashPush/collect/collectionDetail')
		},
		// type 1:新建文件夹 2:删除文件夹 3:上传素材 4:素材搬家
		goTo(type){
			console.log("点击========type",type)
			if(type==1){
					this.$refs.pop.show({
						anim: 'center',
						shadeClose: false,
						topclose: false
					});
			}
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #fff;
}
.material-center-page {
	.directory-cls {
		position: fixed;
		top:0;
		z-index: 999;
		background-color: #fff;
		padding: 40rpx 34rpx 0;
		height: 130rpx;
		width: 100%;
	}
	// 文件夹cls
	.file-cls {
		padding: 30rpx 34rpx;
		image {
			width: 104rpx;
			height: 104rpx;
			margin-right: 20rpx;
		}
		.file-name-cls {
			text {
				font-size: 32rpx;
			}
			view {
				margin-left: 12rpx;
				width: 68rpx;
				height: 34rpx;
				border-radius: 8rpx;
				border: 2rpx solid #1e6ceb;
				background: #fff;
				color: #1e6ceb;
				font-size: 24rpx;
			}
		}
	}
	.height130 {
		height: 130rpx;
	}
	// 底部按钮cls
	.fixed-bottom-btn {
		background-color: #fff;
		z-index: 999;
		border-top: 2rpx solid #ededed;
		display: flex;
		align-items: center;
		width: 100%;
		height: 130rpx;
		position: fixed;
		bottom: 0;
		.btn-cls {
			width: calc(100% / 2);
			image {
				width: 52rpx;
				height: 52rpx;
				margin-bottom: 12rpx;
			}
			view {
				font-size: 24rpx;
			}
		}
	}
	
	// “新建文件夹” 弹框
	.v-pop-cls{
		padding: 40rpx 26rpx 60rpx;
		border-radius: 20rpx;
		width: 644rpx;
		background-color: #fff;
		.must {
			color: red;
			margin-left: 8rpx;
		}
		.input-frame {
			width: 360rpx;
			border: 1px solid #d9d9d9;
			padding: 20rpx;
			border-radius: 10rpx;
		}
		.confirm-btn,.cancel-btn{
				width: 272rpx;
				height: 86rpx;
				border-radius: 20rpx;
				font-size: 36rpx;  
				display: flex;
				align-items: center;
				justify-content: center;
		}
		.confirm-btn{
			background: #1E6CEB;color: #FFF;
		}
		.cancel-btn{
			border: 2rpx solid #EFEFEF;
			color: #999;
		}
	}
}
</style>
